<!-- 轮播图与推荐商品 -->
<template>
  <div class="carousel">
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel trigger="click" height="500px">
        <el-carousel-item v-for="item in carouseList" :key="item.id">
          <img :src="item.s_photos[0].path" alt="" />
        </el-carousel-item>
      </el-carousel>

      <!-- 左侧导航 -->
      <div class="bannerNav">
        <div class="floorNav">
          <ul v-for="item in floorNavList" :key="item.id">
            <li @mouseenter="navEnterFn" @mouseleave="navLeaveFn">
              <span>{{ item.text }}</span
              ><span>&gt;</span>
            </li>
          </ul>
        </div>
        <div class="insideNav" v-show="flag">
          <ul
            v-for="item in insideNavList"
            :key="item.id"
            @mouseenter="navEnterFn"
            @mouseleave="navLeaveFn"
          >
            <li>
              <span>{{ item.text }}</span>
            </li>
          </ul>
        </div>
      </div>

      <!-- 推荐商品 -->
      <div class="hot-products">
        <div
          class="product-box"
          v-for="item in recomList"
          :key="item.id"
          @click="jump(item)"
        >
          <img :src="item.s_goods_photos[0].path" alt="" />
          <div class="container">
            <p>{{ item.name }}</p>
            <p>{{ item.desc }}</p>
            <p>￥{{ item.price }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      carouseList: [],
      recomList: [],
      // 轮播图左侧导航一级菜单数据
      floorNavList: [
        {
          id: 1,
          text: "无线路由器",
        },
        {
          id: 2,
          text: "企业无线",
        },
        {
          id: 3,
          text: "网卡",
        },
        {
          id: 4,
          text: "交换机",
        },
        {
          id: 5,
          text: "路由器/防火墙",
        },
        {
          id: 6,
          text: "工业产品",
        },
        {
          id: 7,
          text: "安防监控",
        },
        {
          id: 8,
          text: "智能楼宇及智能家居",
        },
        {
          id: 9,
          text: "综合布线",
        },
        {
          id: 10,
          text: "其它产品",
        },
      ],
      // 轮播图左侧导航二级菜单数据
      insideNavList: [
        {
          id: 1,
          text: "新品",
        },
        {
          id: 2,
          text: "Wi-Fi 6无线路由器",
        },
        {
          id: 3,
          text: "易展路由器",
        },
        {
          id: 4,
          text: "Wi-Fi 5无线路由器",
        },
        {
          id: 5,
          text: "Wi-Fi 4无线路由器",
        },
        {
          id: 6,
          text: "扩展器/迷你路由/HyFi/电力线",
        },
      ],

      flag: false,
    };
  },
  methods: {
    navEnterFn() {
      this.flag = "true";
    },
    navLeaveFn() {
      this.flag = !this.flag;
    },
    // 点击商品跳转
    jump(item) {
      this.$router.push({
        path: "/detail",
        query: {
          id: item.id,
        },
      });
    },
  },

  created() {
    // 获取轮播图
    axios({
      method: "GET",
      url: "http://shop.bluej.cn/api/carousel",
      params: {
        project_id: 90,
        site: 110,
      },
    })
      .then((res) => {
        this.carouseList = res.data.result;
      })
      .then((err) => {
        // console.log(err);
      });

    // 获取推荐商品信息
    axios({
      method: "GET",
      url: "http://shop.bluej.cn/api/goods",
      params: {
        project_id: 90,
        status: 1,
        classify_id: 801,
      },
    })
      .then((res) => {
        // 接口获取的数组为倒序
        this.recomList = res.data.result.rows.reverse();
        console.log(this.recomList);
      })
      .then((err) => {
        // console.log(err);
      });
  },
};
</script>

<style lang="scss" scoped>
.carousel {
  width: 100%;
  .block {
    position: relative;
    .el-carousel {
      img {
        width: 1200px;
      }
      ::v-deep .el-carousel__arrow {
        &:first-child {
          transform: translateX(200px);
        }
      }
    }
    .bannerNav {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 999;
      .floorNav {
        width: 200px;
        height: 500px;
        li {
          background-color: rgba(51, 51, 51, 0.5);
          width: 200px;
          height: 50px;
          line-height: 50px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          &:hover {
            background-color: rgb(0, 150, 255);
          }
          span {
            font-size: 14px;
            color: #fff;
            &:first-child {
              margin-left: 24px;
            }
            &:last-child {
              margin-right: 16px;
            }
          }
        }
      }
      .insideNav {
        width: 333px;
        height: 500px;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 200px;
        z-index: 999;
        li {
          width: 333px;
          height: 65px;
          line-height: 65px;
          text-align: left;
          span {
            font-size: 14px;
            margin-left: 24px;
            font-size: 14px;
            color: #666;
            font-weight: 700;
            cursor: pointer;
            &:hover {
              color: rgb(0, 150, 255);
            }
          }
        }
      }
    }
    .hot-products {
      width: 1200px;
      margin: 20px auto 64px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .product-box {
        width: 290px;
        height: 260px;
        border: 1px solid #e6e6e6;
        box-sizing: border-box;
        box-shadow: 0 0 8px 0 rgb(0 0 0 / 5%);
        position: relative;
        cursor: pointer;
        &:hover {
          box-shadow: 0 4px 20px 0 rgb(0 0 0 / 15%);
        }
        .container {
          width: 100%;
          position: absolute;
          bottom: 10px;
          margin: 0 auto;
          p {
            font-size: 12px;
            color: #666;
            line-height: 16px;
            &:first-child {
              font-size: 14px;
              color: #333;
              line-height: 20px;
              margin-bottom: 7px;
            }
            &:nth-child(2) {
              margin: 0 10px;
            }
            &:last-child {
              margin-top: 4px;
              font-size: 14px;
              color: #ff3232;
              line-height: 20px;
              margin-top: 4px;
            }
          }
        }
      }
    }
  }
}
</style>
